<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions" >

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }

    </script>

    <h:panelGroup layout="block"  styleClass="poolInfo" style="position: relative;"
                  rendered="#{not empty poolSessionBean.pool}">
            
            <div class="poolContador">
                
                <script type="text/javascript">
                    $(function () {
                        var fechaFin = new Date(#{poolSessionBean.fechaFin(poolSessionBean.pool)} );
                        $('#defaultCountdown#{poolSessionBean.pool.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                    });
                </script>

                <div class="poolFinaliza" > Tiempo disponible </div>
                <div id="defaultCountdown#{poolSessionBean.pool.nroPool}" ></div>
                
            </div>

        <h:panelGroup layout="block" styleClass="poolCantidades" style="margin-left: 25px;">

               <h:outputText  value="#{poolSessionBean.pool.cantidadDisponible}"
                             style="margin: 10px;">
                   <f:convertNumber pattern="0"/>
               </h:outputText>

               <h:outputText value="Unidades disponibles" />

               <p:effect type="pulsate" event="load" delay="1">
                    <f:param name="mode" value="'show'" />
               </p:effect>

               <h:panelGroup layout="block" styleClass="poolBarraPorcentaje" style="">

                    <p:progressBar id="porcentajeVenta"
                          value="#{poolSessionBean.porcentajeFinalizadoPool(poolSessionBean.pool)}" labelTemplate="{value}% Vendido"
                          displayOnly="true" style="height: 15px; width: 220px; font-size: 10px;"   >

                       <p:effect type="shake" event="load" delay="1">
                            <f:param name="mode" value="'show'" />
                       </p:effect>

                   </p:progressBar>
                </h:panelGroup>
            </h:panelGroup>
        
        <div class="poolInfoReserva" >

            <div class="poolInfoReservaImagen">
                <p:graphicImage value="../../TiendaVirtual/imagenes/pool/pool-gente.jpg"
                                height="50" />
            </div>
            
        </div>

        <h:panelGroup layout="block" styleClass="poolAgotado" rendered="#{not poolSessionBean.pool.activa}"
                                  style="z-index: 999;">


            <p:graphicImage value="../../TiendaVirtual/imagenes/pool/agotado.jpg"
                            height="50" style="z-index: 999;" />

        </h:panelGroup>

        <div class="poolBasesCondiciones">

            <!--<p:commandLink id="lnkBC" ajax="false" >-->

                <div class="poolBasesCondicionesImagen">
                    <p:graphicImage id="img" value="../resources/imagenes/info32.png" style="cursor: pointer;" />
                </div>

                <div class="poolBasesCondicionesTexto">
                    <h:outputText value="Términos y Condiciones"/>
                </div>           

            <!--</p:commandLink>-->

                <p:overlayPanel id="bcPanel" for="img" hideEffect="fade" dynamic="true"
                                showCloseIcon="true" style="text-align: left; width: 700px;">

                    <h:outputText value="Términos y Condiciones" style="font-weight: bold; font-size: 12px;" />
                    <hr/>
                    <p:spacer height="15" style="width: 100%" />

                    <ui:repeat value="#{poolSessionBean.pool.tipo.basesCondiciones}" var="s" >

                        <div class="itemBasesCondiciones">

                            <h:outputText value="#{s.descripcion}" />

                        </div>

                    </ui:repeat>

                    <ui:repeat value="#{poolSessionBean.pool.baseCondicionesAdicionales}" var="s" >

                        <div class="itemBasesCondiciones">

                            <h:outputText value="#{s.descripcion}" />

                        </div>
                    </ui:repeat>

                    <p:spacer height="15" style="width: 100%" />

                </p:overlayPanel>
            
        </div>

    </h:panelGroup>


    <h:panelGroup layout="block" styleClass="poolNoEncontrado" 
                  rendered="#{empty poolSessionBean.pool}">

        <p:messages showDetail="true" />

    </h:panelGroup>
</ui:composition>
